<template>
  <div class="menuview-2iJo3" >
    <div class="menuview-17K3g">
      <main class="menuview-i6fQ3">
        <ul class="menuview-ul">
          <li :key="index" v-for="(item,index) in shopDetailsMenu" v-bind:class="{ 'menuview-ul-li': isActive==index }" @click="addLiClass(index)">
            <img :src="item.icon_url?'https://fuss10.elemecdn.com/'+item.icon_url+(item.icon_url.substr(-3) == 'peg'?'.jpeg':'.png')+'?imageMogr/format/webp/thumbnail/18x/':''" alt="">
            <span class="menuview-ul-span">{{item.name}}</span>
          </li>
        </ul>
        <section class="menuview-section">
          <div class="scroller">
            <dl :key="index" v-for="(item,index) in shopDetailsMenu">
              <dt>
                <div class="category-title">
                  <strong>{{item.name}}</strong>
                  <span class="category-description">{{item.description}}</span>
                </div>
                <div class="category-more">
                  <span class="more-span" @click="togglePop(index)">...</span>
                  <div v-show="showPop === index" class="popup">
                    <span>{{item.name}}</span>
                    <span>{{item.description}}</span>
                  </div>
                </div>
              </dt>
              <dd :key="inx" v-for="(val,inx) in item.foods">
                <div class="foodimg">
                  <img :src="val.image_path ? 'https://fuss10.elemecdn.com/'+val.image_path+(val.image_path.substr(-3)=='peg'? '.jpeg':'.png')+'?imageMogr/format/webp/thumbnail/!140x140r/gravity/Center/crop/140x140/':''" alt="">
                </div>
                <div class="foodinfo">
                  <header>
                    <span class="foodinfo-title">{{val.name}}</span>
                    <aside v-if="val.attributes.length>0"><span class="foodinfo-sign" style="color: rgb(236, 156, 104);">{{val.attributes[0]?val.attributes[0].icon_name:''}}</span></aside>
                  </header>
                  <p class="fooddescription">{{val.description}}</p>
                  <p class="foodsales">
                    <span>月售{{val.month_sales}}份</span>
                    <span>好评率{{val.satisfy_rate}}%</span>
                  </p>
                  <p class="foodactivity" v-if="val.activity"><span>{{val.activity.image_text}}</span></p>
                  <strong class="foodprice">
                    <span>{{val.specfoods[0].price}}</span>
                    <span class="foodprice-qi">{{val.specfoods.length>=2?'起':''}}</span>
                  </strong>
                  <div class="cartbutton">
                    <a href="javascript:" style="display:none">
                      <svg viewBox="0 0 44 44" id="cart-add" width="100%" height="100%"><path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm0 42C11 42 2 33 2 22S11 2 22 2s20 9 20 20-9 20-20 20z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M32 20c1.1 0 2 .9 2 2s-.9 2-2 2H12c-1.1 0-2-.9-2-2s.9-2 2-2h20z" clip-rule="evenodd"></path></svg>
                    </a>
                    <span></span>
                    <a href="javascript:" @click="changeCount(val.item_id)">
                      <svg viewBox="0 0 44 44" id="cart-minus" width="100%" height="100%"><path fill="none" d="M0 0h44v44H0z"></path><path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z" clip-rule="evenodd"></path></svg>
                    </a>
                  </div>
                </div>
              </dd>               
            </dl>
          </div>
        </section>
      </main>
      <div class="menuview-footer">
        <div class="bottomNav">
          <span class="bottomNav-span"><i class="iconfont">&#xe600;</i></span>
          <div class="bottomNav-div">
            <p class="money-to"><span>¥0</span></p>
            <p class="distribution"><span>配送费¥5</span></p>
          </div>
          <a href="javascript:" class="bottomNav-money">¥20起送</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'shopMenuview',
  data: function () {
    return {
      showPop: -1,
      isActive: 0
    }
  },
  computed: {
    shopDetailsMenu () {
      return this.$store.state.shopDetailsMenu
    },
    carts () {
      return this.$store.state.carts
    }
  },
  methods: {
    togglePop: function (index) {
      if (this.showPop === index) {
        this.showPop = -1
      } else {
        this.showPop = index
      }
    },
    changeCount: function (id) {
      // console.log(id)
      this.$store.commit('ADDCART', id)
    },
    addLiClass: function (index) {
      if (this.isActive !== index) {
        this.isActive = index
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../static/hotcss/px2rem.scss';
  .menuview-2iJo3{
    height:px2rem(960); 
    .menuview-17K3g{
      height: 100%;
      padding-bottom: px2rem(96);
      background-color: #fff;
      .menuview-i6fQ3{
        display: flex;
        height: 100%;
        .menuview-ul{
          width: px2rem(170);
          overflow-y: auto;
          height: 100%;
          background-color: #f8f8f8;
          li{
            position: relative;
            padding: px2rem(35) px2rem(15); 
            border-bottom: 1px solid #ededed;
            font-size: px2rem(26);
            color: #666;
          }
          .menuview-ul-li{
            background-color: #fff;
            border-right-color: #fff;
            font-weight: bolder;
            .menuview-ul-span{
              &:after{
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: px2rem(6);
                background-color: #3190e8;
              }
            }              
          }
        }
        .menuview-section{
          position: relative;
          height: 100%;
          flex: 1;
          display: block;
          width: 0;
          .scroller{
            height: 100%;
            overflow-y: auto;
            dl{
              dt{
                position: relative;
                padding: px2rem(15) px2rem(20);
                background-color: #f1f1f1;
                .category-title{
                  display: flex;
                  align-items: flex-end;
                  overflow: hidden;
                  strong{
                    margin-right: px2rem(10);
                    font-weight: 700;
                    font-size: px2rem(28);
                    color: #666;
                    -webkit-box-flex: 0;
                    -ms-flex: none;
                    flex: none;
                  }
                  .category-description{
                    flex: 1;
                    display: block;
                    width: 0;
                    color: #999;
                    font-size: px2rem(20);
                    white-space: nowrap;
                    overflow: hidden;
                  }
                }
                .category-more{
                  .more-span{
                    position: absolute;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    width: px2rem(70);
                    z-index: 2;
                    text-align: center;
                    line-height: 1;
                    color: #999;
                  }
                  .popup{
                    position: absolute;
                    background-color: #39373a;
                    opacity: .97;
                    transform: scale(1);
                    transform-origin: top right;
                    width: 63%;
                    right: px2rem(10);
                    z-index: 3;
                    color: #eee;
                    font-size: px2rem(24);
                    border-radius: px2rem(24);
                    padding: px2rem(18) px2rem(20);
                    transition: all .3s ease;
                    cursor: pointer;
                    &:after{
                      content: "";
                      position: absolute;
                      top: 0;
                      transform: translateY(-100%);
                      right: px2rem(20);
                      border: px2rem(10) solid transparent;
                      border-bottom-color: #39373a;
                    }
                  }
                }
              }
              dd{
                position: relative;
                background-color: #fff;
                margin: 0;
                padding: px2rem(30) px2rem(20);
                margin-bottom: 1px;
                display: flex;
                min-height: px2rem(220);
                .foodimg{
                  margin-right: 4%;
                  display: block;
                  vertical-align: top;
                  img{
                    width:px2rem(140); 
                    height: px2rem(140);
                    border-radius:px2rem(6); 
                  }
                }
                .foodinfo{
                  position: relative;
                  padding-bottom: px2rem(50); 
                  flex: 1;
                  header{
                    line-height: 1.1;
                    overflow: hidden;
                    display: flex;
                    justify-content: space-between;
                    .foodinfo-title{
                      display: inline-block;
                      max-width:px2rem(300); 
                      white-space: nowrap;
                      overflow: hidden;
                      font-size: px2rem(30);
                      color: #333;
                      font-weight: 700;
                    }
                    aside{
                      line-height: px2rem(24);
                      margin-left: px2rem(18);
                      flex: none;
                      .foodinfo-sign{
                        display: inline-block;
                        vertical-align: middle;
                        padding: px2rem(3) px2rem(5);
                        line-height: 100%;
                        text-align: center;
                        border: 1px solid currentColor;
                        font-size: px2rem(16);
                        border-radius: px2rem(20);
                      }
                    }
                  }
                  .fooddescription{
                    margin: px2rem(10) 0;
                    font-size: px2rem(19);
                    color: #999;
                  }
                  .foodsales{
                    margin:  px2rem(13) 0;
                    color: #666;
                    font-size: px2rem(22);
                    line-height: 1;
                  }
                  .foodactivity{
                    font-size: px2rem(22);
                    transform: scale(0.8);
                    transform-origin: left; 
                    color: #f07373;
                    white-space: nowrap;
                    span{
                      display: inline-block;
                      border: 1px solid currentColor;
                      padding: 0 px2rem(5);
                    }
                  }
                  .foodprice{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    font-weight: 700;
                    font-size: px2rem(32);
                    line-height: px2rem(32);
                    color: #f60;
                    &:before{
                      font-weight: 400;
                      content: "\A5";
                      font-size: px2rem(22);
                      display: inline-block;
                    }
                    .foodprice-qi{
                      font-size: px2rem(24);
                      color: #666;
                      font-weight: 400;
                    }
                  }
                  .cartbutton{
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    height: px2rem(54);
                    a{
                      display: inline-block;
                      padding: px2rem(4);
                      vertical-align: middle;
                      text-decoration: none;
                      svg{
                        width: px2rem(40);
                        height:  px2rem(40);
                        fill: #3190e8;
                      }
                    }
                    span{
                      display: inline-block;
                      vertical-align: middle;
                      text-align: center;
                      color: #666;
                      font-size: px2rem(28);
                      min-width: px2rem(30);
                      max-width: px2rem(150);
                      overflow: hidden;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .menuview-footer{
        .bottomNav{
          position: fixed;
          right: 0;
          bottom: 0;
          left: 0;
          display: flex;
          align-items: center;
          padding-left: px2rem(158);
          background-color: #3d3d3f;
          height: px2rem(96);
          opacity: 0.95;
            .bottomNav-span{
              position: absolute;
              left: px2rem(24);
              bottom: px2rem(15);
              width: px2rem(100);
              height: px2rem(100);
              box-sizing: border-box;
              border-radius: 100%;
              background-color: #3d3d3f;
              border:  px2rem(10) solid #444;
              box-shadow: 0 px2rem(-6) px2rem(4) 0 rgba(0,0,0,.1);
              will-change: transform;
              text-align: center;
              line-height:px2rem(100); 
              &::before{
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-size: px2rem(45);
                content: "";
              }
              &::after{
                position: absolute;
                right: px2rem(-9);
                top: px2rem(-10);
                line-height: 1;
                background-color: #ff461d;
                color: #fff;
                border-radius: px2rem(24);
                padding: px2rem(4) px2rem(10);
                content: attr(attr-quantity);
                font-size: px2rem(20);
                visibility: hidden;
              }
              i{
                font-size:px2rem(70);
                color: #66666a; 
              }
            }
            .bottomNav-div{
              flex: 1;
              display: block;
              .money-to{
                font-size: px2rem(36);
                line-height: normal;
                color: #fff;
              }
              .distribution{
                color: #f5f5f5;
                font-size: px2rem(20);
              }
            }
            .bottomNav-money{
              height: 100%;
              width: px2rem(210);
              background-color: #535356;
              color: #fff;
              text-align: center;
              text-decoration: none;
              font-size: px2rem(30);
              font-weight: 700;
              line-height:px2rem(96);
            }
          }
        
        
      }
    } 
  }
</style>